<template>
	<view class="content">
		<view class="heardbox">
			 <view class="heardtitle">
			 	闲呗二手交易平台
			 </view>
			 <view class="bigsearchbox">
			 	<view class="ssuokuang">
			 		<view>搜宝贝</view>
					<view class="iconfont icon-sousuo"></view>
					<view><input @click="goseach" type="text" placeholder="请输入关键字"></view>
			 	</view>
			 </view>
		</view>
		<!-- 全部图标 -->
		<view class="iconbigbox">
			<view class="alliconbox">
				<view class="iconbox">
					<view @click="shopptype(5)" class="iconfont icon-che"></view>
					<view class="">
						汽车
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(9)" class="iconfont icon-yundong"> </view>
					<view class="">
						户外运动
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(7)" class="iconfont icon-wanju"></view>
					<view class="">
						玩具
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(12)" class="iconfont icon-tushu"></view>
					<view class="">
						图书
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(1)" class="iconfont icon-dianqi"></view>
					<view class="">
						电器
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(3)" class="iconfont icon-fuzhuang_lifu"></view>
					<view class="">
						服装
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(4)" class="iconfont icon-shoushi"></view>
					<view class="">
						奢侈品
					</view>
				</view>
				
				<view class="iconbox">
					<view @click="shopptype(2)" class="iconfont icon-shuma"></view>
					<view class="">
						数码
					</view>
				</view><view class="iconbox">
					<view @click="shopptype(6)" class="iconfont icon-jiazhuang"></view>
					<view class="">
						家装
					</view>
				</view>
				<view class="iconbox">
					<view @click="shopptype(10)" class="iconfont icon-chongwu1"></view>
					<view class="">
						宠物
					</view>
				</view>		
			</view>	
		</view>
		
		<!-- 闲呗活动专区 -->
		<view class="huodongbox">
		</view>
		<!-- 全部商品 -->
		<view class="tuijianbox">
			推荐好货
		</view>
		<view class="allshoppbox">
			<view class="allshopp" @click="goshopp(item)" v-for="(item,index) in shopplist" :key="index">
				<view class="shoppbox">
					<img :src='item.commodityImg' alt="">
					<view class="shoppname">
						{{item.describe}}
					</view>
<!-- 					<view class="miaoshu">
						{{item.describe}}
					</view> -->
					<view class="shoppmoney">
						￥<span>{{item.originalPrice}}</span>
					</view>
					<view class="shoppaddress">
						{{item.address}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { log } from 'util';
import request from '../../com/request.js'
	import Toast from '../../wxcomponents/vant/toast/toast';
	export default {
		data() {
			return {
				pagenum:1,
				size:6,
				shopplist:[],
				start:0,
				shoppnum:0,
			}
		},
		onLoad() {
			
		},
		mounted(){
			this.getdatalist()
		},
		
		methods: {
			goseach(){
				uni.navigateTo({
								  url:"/pages/search/search",
								})
			},
			goshopp(item){
				console.log(item,133)
				uni.setStorageSync('hx220408commodityId', item.commodityId);
				uni.setStorageSync('hx220408userTel', item.userTel);
				uni.navigateTo({
								  url:"/pages/goods/goods",
								})
			},
			shopptype(id){
				console.log(id,136)
				uni.navigateTo({
								  url:"/pages/search/search",
								})
			},
			getdatalist(){
				request({
					url:'api/commodityTable/get',
					data:{
						start:(this.pagenum-1)*this.size,
						size:this.size
					},
					success:(resp)=>{
						console.log(resp.data)
						this.shoppnum = resp.data.num
						var arr1 = resp.data.data
						var arr2 = this.shopplist,
						arr1 = arr2.concat(arr1)  //合并两个数据内容
						this.shopplist = arr1
						console.log(this.shopplist,140)
					}
				})
			},
		},
		 onReachBottom: function () { //触底开始下一页
			 var that = this
			 var pagenum = that.pagenum + 1; //获取当前页数并+1
			 console.log(pagenum) 
			 var allpage = Math.ceil(that.shoppnum/that.size)
			 // console.log(that.shoppnum,149) 
			 if(that.pagenum<allpage){
				 that.pagenum=pagenum, //更新当前页数
				 that.getdatalist();//重新调用请求获取下一页数据
				 
			 }else{
				 uni.showToast({
				 	title: '没有东西啦~',
				 	duration: 500,
					icon:'none',
				 });
			 }
		 }
	}
</script>

<style>
	.content{
		/* height: 1000px; */
	}
	.heardbox{
		height: 130px;
		width: 100%;
		background-image:
		    linear-gradient(
		      to top right,
		      rgb(170, 255, 255), rgb(250, 221, 244)
		    );
		position: fixed;
		top: 0;
	}
	.heardtitle{
		text-align: center;
		margin-top: 50px;
		font-size: 19px;
		font-weight: 550;
	}
	/* //图标块 */
	.iconbigbox{
		width: 97%;
		height: 150px;
		margin-top: 134px;
		display: flex;
		justify-content: center;
		margin-left: 1.5%;
	}
	.alliconbox{
		width: 100%;
		background-color: antiquewhite;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
	}
	.iconbox{
		width: 19.5%;
		height: 138rpx;
	}
	.iconbox view:nth-child(1){
		font-size: 39px;
		text-align: center;
		margin-top: 2px;
	}
	.iconbox view:nth-child(2){
		font-size: 16px;
		text-align: center;
	}
	.ssuokuang{
		display: flex;
		width: 680rpx;
		height: 40px;
		background-color: white;
		margin: 0 auto;
		border-radius: 16px;
		margin-top: 9px;
	}
	.ssuokuang view:nth-child(1){
		line-height: 40px;
		font-size: 16px;
		color: #999;
	}
	.ssuokuang view:nth-child(2){
		line-height: 40px;
		font-size: 22px;
		color: #999;
	}
	.ssuokuang input{
		text-align: center;
		width: 300rpx;
		height: 40px;
	}
	.tuijianbox{
		text-align: center;
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	/* //商品块 */
	.allshoppbox{
		display: flex;
		flex-wrap: wrap;
		background-color: rgb(241,241,241);
		/* justify-content: left; */
	}
	.shoppbox{
		width: 310rpx;
		height: 500rpx;
		background-color: white;
		border-radius: 10px;
		margin-left: 45rpx;
		margin-top: 20rpx;
	}
	.shoppaddress{
		font-size: 25rpx;
		width: 200rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.shoppname{
		font-size: 33rpx;
		font-weight: 600;
		margin: 0 auto;
		width: 130px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		/* max-width: 100px; */
/* 		margin-left: 8px;
		-webkit-line-clamp:2;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap; */
	}
	.miaoshu{
		border: 1px solid saddlebrown;
		text-overflow: ellipsis;
		margin: 0 auto;
		width: 130px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.shoppbox img{
		width: 100%;
		height: 300rpx;
		border-radius: 10px 10px 0px 0px ;
	}
	.shoppmoney{
		width: 200rpx;
		color: rgb(246,70,71);
		font-size: 12px;
		/* border: 1px solid red; */
		margin-left: 19rpx;
		margin-top: 10rpx;
	}
	.shoppmoney span{
		font-weight: bold;
		font-size: 18px;
	}
</style>
